<template>
	<el-dialog :show-close="true" :custom-class="'user-dialog'" :visible="dialogvisible" @close="$emit('update:dialogvisible', false)">
		<div class="avatar-box">
			<img :src="userdata.id ? '/static/images/users/user-'+userdata.id+'.jpg' : imagePlaceholder" alt="user avatar">
			<div class="star" @click="userdata.starred = !userdata.starred">
				<i class="mdi mdi-star align-vertical-middle" v-if="userdata.starred"></i>
				<i class="mdi mdi-star-outline align-vertical-middle" v-if="!userdata.starred"></i>
			</div>
		</div>
		<div class="form-box">
			<el-input placeholder="Fullname" v-model="userdata.full_name"></el-input>
			<el-input placeholder="Email" v-model="userdata.email"></el-input>
			<el-input placeholder="Phone" v-model="userdata.phone"></el-input>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'UserDialog',
	props: ['userdata', 'dialogvisible'],
	data() {
		return {
			imagePlaceholder: ''
		}
	}
}
</script>

<style lang="scss">
@import '../assets/scss/_variables';

.el-dialog.user-dialog {
	max-width: 400px;

	.el-dialog__header {
		padding: 0;

		.el-dialog__headerbtn {
			z-index: 1;
			background: rgba(0, 0, 0, 0.05);
			min-width: 18px;
			min-height: 18px;
			border-radius: 4px;
			
			.el-dialog__close {
				color: $background-color;
			}
		}
	}
	.el-dialog__body {
		padding: 0;
	}

	.avatar-box {
		background: $text-color-accent;
		margin-bottom: 50px;
		position: relative;

		img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			position: relative;
			bottom: -50px;
			display: block;
			margin: 0 auto;
			background: white;
			border: 2px solid $text-color-accent;
			box-sizing: border-box;
		}

		.star {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 1;
			background: white;
			box-sizing: border-box;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 28px;
			font-size: 20px;
			border-radius: 50%;
			border: 2px solid $text-color-accent;
			cursor: pointer;
			margin-top: 35px;
			margin-left: 35px;

			.mdi-star {
				color: #ffd730;
			}
			.mdi-star-outline {
				opacity: .5;
			}
		}
	}

	.form-box {
		padding: 20px;
		box-sizing: border-box;

		& > * {
			margin: 10px 0;
		}
	}
}
</style>
